<div id="vital-details" v-cloak>
  <div purpose="page-container">
    <div purpose="page-content">
      <docs-nav-and-search search-filter="vitals" current-section="vitals" :algolia-public-key="algoliaPublicKey"></docs-nav-and-search>
      <div purpose="search-and-headline" class="d-flex flex-md-row flex-column justify-content-between align-items-md-center align-items-start">
        <div purpose="page-headline" class="d-flex flex-column">
          <h2>Vitals</h2>
          <p>Fleet’s built-in queries for collecting and storing important device information.</p>
        </div>
      </div>
      <div purpose="platform-filters" class="d-flex justify-content-center"  >
        <div purpose="platform-filter" :class="[selectedPlatform === 'apple' ? 'selected' : '']+' '+[bowser.windows ? 'order-3' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('apple')">
          <h1 id="apple" class="d-flex align-items-center">
          <img src="/images/os-macos-dark-24x24@2x.png" alt="macOS" class="d-inline">
          <span class="d-none d-md-inline">Apple</span>
          </h1>
        </div>
        <div purpose="platform-filter" :class="[selectedPlatform === 'linux' ? 'selected' : '']+' '+[bowser.windows ? 'order-2' : '']"  class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('linux')">
          <h1 id="linux" class="d-flex align-items-center">
            <img src="/images/os-linux-dark-24x24@2x.png" alt="Linux" class="d-inline">
            <span class="d-none d-md-inline">Linux</span>
          </h1>
        </div>
        <div purpose="platform-filter" :class="[selectedPlatform === 'windows' ? 'selected' : '']+' '+[bowser.windows ? 'order-1' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('windows')">
          <h1 id="windows" class="d-flex align-items-center">
            <img src="/images/os-windows-dark-24x24@2x.png" alt="Windows" class="d-inline">
            <span class="d-none d-md-inline">Windows</span>
          </h1>
        </div>
        <div purpose="platform-filter" :class="[selectedPlatform === 'chrome' ? 'selected' : '']+' '+[bowser.windows ? 'order-4' : '']" class="d-flex flex-row justify-content-center align-items-center" @click="clickSelectPlatform('chrome')">
          <h1 id="chrome" class="d-flex align-items-center">
            <img src="/images/os-chromeos-dark-24x24@2x.png" alt="Chrome" class="d-inline">
            <span class="d-none d-md-inline">ChromeOS</span>
          </h1>
        </div>
      </div>
      <div purpose="vital-details-and-sidebar" class="d-flex flex-md-row flex-column">
        <div purpose="table-of-contents" class="d-md-flex d-none">
          <div v-if="selectedPlatform === 'apple'">
            <% // macOS policies (server-side-rendered)
              for(let vital of macOsVitals) {
            %>
              <a class="d-block <%- vital.slug === thisVital.slug ? 'active' : '' %>" purpose="vital-link" href="/vitals/<%- vital.slug %>#apple"><%- vital.name %></a>
            <% } %>
          </div>
          <div v-else-if="selectedPlatform === 'linux'">
            <% // Linux policies (server-side-rendered)
              for(let vital of linuxVitals) {
            %>
              <a class="d-block <%- vital.slug === thisVital.slug ? 'active' : '' %>" purpose="vital-link" href="/vitals/<%- vital.slug %>#linux"><%- vital.name %></a>
            <% } %>
          </div>
          <div v-else-if="selectedPlatform === 'windows'">
            <% // Windows policies (server-side-rendered)
              for(let vital of windowsVitals) {
            %>
              <a class="d-block <%- vital.slug === thisVital.slug ? 'active' : '' %>" purpose="vital-link" href="/vitals/<%- vital.slug %>#windows"><%- vital.name %></a>
            <% } %>
          </div>
          <div v-else-if="selectedPlatform === 'chrome'">
            <% // Windows policies (server-side-rendered)
              for(let vital of chromeVitals) {
            %>
            <a class="d-block <%- vital.slug === thisVital.slug ? 'active' : '' %>" purpose="vital-link" href="/vitals/<%- vital.slug %>#chrome"><%- vital.name %></a>
            <% } %>
          </div>
        </div>
        <div class="d-flex d-md-none">
          <div purpose="mobile-custom-select" class="d-flex flex-row justify-content-between align-items-center" @click="clickOpenTableOfContents()">
            <div><p><%- thisVital.name %></p></div>
            <div><img src="/images/icon-select-arrows-16x16@2x.png" alt="click to open the table of contents"></div>
          </div>
        </div>
        <div purpose="vital-details" class="d-flex flex-column">
          <h2 purpose="vital-name"><%- thisVital.name %></h2>
          <p purpose="vital-description"><%- thisVital.description %></p>
          <div purpose="vital-check">
            <div purpose="codeblock">
              <div purpose="codeblock-tabs" >
                <a purpose="codeblock-tab" :class="[ selectedTab === 'sql' ? 'selected' : '']" @click="selectedTab = 'sql'">Query</a>
                <a purpose="codeblock-tab" :class="[ selectedTab === 'ps' ? 'selected' : '']"  @click="selectedTab = 'ps'" v-if="thisVital.powershell && selectedPlatform === 'windows'">PowerShell<span purpose="new-badge">NEW</span></a>
                <a purpose="codeblock-tab" :class="[ selectedTab === 'bash' ? 'selected' : '']"  @click="selectedTab = 'bash'" v-if="thisVital.bash && selectedPlatform === 'apple'">Bash<span purpose="new-badge">NEW</span></a>
                <div purpose="copy-button-tab">
                  <div purpose="copy-button"></div>
                </div>
              </div>
              <pre v-show="selectedTab === 'sql'"><code class="hljs sql"><%= thisVital.query %></code></pre>
              <pre v-show="selectedTab === 'ps'"><code class="hljs ps has-linebreaks"><%= thisVital.powershell %></code></pre>
              <pre v-show="selectedTab === 'bash'"><code class="hljs sh"><%= thisVital.bash %></code></pre>
            </div>
          </div>
          <div purpose="powershell-note" v-if="selectedTab === 'ps'">
            <img src="/images/icon-info-16x16@2x.png" alt="An icon indicating that this section has important information">
            <div>
              <p>PowerShell commands are currently work in progress, <a :href="'https://github.com/fleetdm/fleet/edit/main/'+queryLibraryYmlRepoPath">contributions welcome</a>.</p>
            </div>
          </div>
          <div purpose="powershell-note" v-if="selectedTab === 'bash'">
            <img src="/images/icon-info-16x16@2x.png" alt="An icon indicating that this section has important information">
            <div>
              <p>Bash commands are currently work in progress, <a :href="'https://github.com/fleetdm/fleet/edit/main/'+queryLibraryYmlRepoPath">contributions welcome</a>.</p>
            </div>
          </div>
          <% if(thisVital.discovery) {%>
            <div purpose="discovery-table-note">
              <img src="/images/icon-info-16x16@2x.png" alt="An icon indicating that this section has important information">
              <p>This query uses the <code><%- thisVital.discovery %></code> data table. <a href="/tables/<%- thisVital.discovery %>">Learn more</a></p>
              <div>
              </div>
            </div>
          <% } %>
          <div purpose="edit-button-container">
            <a purpose="edit-button" class="d-flex align-items-center text-nowrap" target="_blank" :href="'https://github.com/fleetdm/fleet/edit/main/'+queryLibraryYmlRepoPath+'#L'+thisVital.lineNumberInYaml">Suggest an edit</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <modal purpose="table-of-contents-modal" v-if="modal === 'table-of-contents'" @close="closeModal()">
    <p purpose="mobile-table-of-contents-header"><strong>Vitals</strong></p>
      <div purpose="table-of-contents" v-if="selectedPlatform === 'apple'">
        <% // macOS policies (server-side-rendered)
          for(let vital of macOsVitals) {
        %>
          <a class="d-block <%- vital.slug === thisVital.slug ? 'active' : '' %>" purpose="vital-link" href="/vitals/<%- vital.slug %>#apple"><%- vital.name %></a>
        <% } %>
      </div>
      <div purpose="table-of-contents" v-else-if="selectedPlatform === 'linux'">
        <% // Linux policies (server-side-rendered)
          for(let vital of linuxVitals) {
        %>
          <a class="d-block <%- vital.slug === thisVital.slug ? 'active' : '' %>" purpose="vital-link" href="/vitals/<%- vital.slug %>#linux"><%- vital.name %></a>
        <% } %>
      </div>
      <div purpose="table-of-contents" v-else-if="selectedPlatform === 'windows'">
        <% // Windows policies (server-side-rendered)
          for(let vital of windowsVitals) {
        %>
          <a class="d-block <%- vital.slug === thisVital.slug ? 'active' : '' %>" purpose="vital-link" href="/vitals/<%- vital.slug %>#windows"><%- vital.name %></a>
        <% } %>
      </div>
      <div purpose="table-of-contents" v-else-if="selectedPlatform === 'chrome'">
        <% // Windows policies (server-side-rendered)
          for(let vital of chromeVitals) {
        %>
        <a class="d-block <%- vital.slug === thisVital.slug ? 'active' : '' %>" purpose="vital-link" href="/vitals/<%- vital.slug %>#chrome"><%- vital.name %></a>
        <% } %>
      </div>
  </modal>
  <signup-modal></signup-modal>
</div>
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>
